<template>
	<view class="add">
		<view class="add_item">
			<text>车牌号</text>
			<input type="text" placeholder="请输入" v-model="addData.binding" />
		</view>
		<view class="add_item">
			<text>车辆品牌</text>
			<input type="text" placeholder="请输入" v-model="addData.brand" />
		</view>
		<view class="add_item">
			<text>车辆型号</text>
			<input type="text" placeholder="请输入" v-model="addData.model" />
		</view>
		<view class="add_item">
			<text>车辆颜色</text>
			<input type="text" placeholder="请输入" v-model="addData.color" />
		</view>
		<view class="add_item">
			<text class="household">住户信息</text>
			<input type="text" disabled />
		</view>
		<view class="add_item">
			<text class="household">住户姓名</text>
			<input type="text" disabled v-model="addData.householdName" />
		</view>
		<view class="add_item">
			<text class="household">手机号码</text>
			<input type="text" disabled v-model="addData.householdPhone" />
		</view>
		<button @click="addVehicle">保存</button>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { useMyStore } from '@/stores/myStore.js';
const store = useMyStore();
const addData = ref({
	brand: '',
	binding: '',
	model: '',
	color: '',
	householdName: '蒋依依',
	householdPhone: '15619009090'
});
const addVehicle = () => {
	let obj = {
		status: 0,
		info: `${addData.value.brand}${addData.value.model}·${addData.value.color}`,
		binding: addData.value.binding,
		src: '',
		address: '',
		householdName: '蒋依依',
		householdPhone: '15619009090'
	};
	if (addData.value.brand === '' || addData.value.binding === '' || addData.value.model === '' || addData.value.color === '') {
		uni.showToast({
			icon: 'none', // 设置提示框的图标，这里设置为无图标
			title: '请填写车辆信息', // 提示框的标题
			duration: 2000 // 提示框的持续时间，单位为毫秒，这里设置为2000毫秒，即2秒
		});
	} else {
		store.getAddVehicle(obj);
		uni.showToast({
			icon: 'none', // 设置提示框的图标，这里设置为无图标
			title: '车辆添加成功', // 提示框的标题
			duration: 2000 // 提示框的持续时间，单位为毫秒，这里设置为2000毫秒，即2秒
		});
		addData.value = {
			brand: '',
			binding: '',
			model: '',
			color: '',
			householdName: '蒋依依',
			householdPhone: '15619009090'
		};
	}
};
</script>

<style lang="scss">
.add {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
	background-color: #fff;
	.add_item {
		width: 100%;
		height: 110rpx;
		border-bottom: 2rpx solid #f2f2f2;
		display: flex;
		align-items: center;
		margin: 30rpx 0;
		.household {
			color: #9a9a9a;
		}
		text {
			width: 160rpx;
			margin-right: 60rpx;
		}
		input {
			width: 480rpx;
			height: 100%;
		}
	}
	button {
		border: none;
		background-color: #006eff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin: 30rpx 0;
	}
}
</style>
